<template>
	<view class="container">
		<view class="section">
			<text class="section-title">个人信息</text>
			<view class="item" @click="editField('name')">
				<text>姓名</text>
				<view class="item-value">
					<text>{{userInfo.name || '未设置'}}</text>
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<view class="item" @click="editField('phone')">
				<text>手机号</text>
				<view class="item-value">
					<text>{{userInfo.phone || '未绑定'}}</text>
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="section">
			<text class="section-title">银行卡管理</text>
			<view class="item" @click="goToBankCards">
				<text>我的银行卡</text>
				<view class="item-value">
					<text>{{bankCards.length > 0 ? '已绑定' + bankCards.length + '张' : '未绑定'}}</text>
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '张三',
					phone: '138****1234'
				},
				bankCards: [
					{id: 1, name: '工商银行', number: '621226******5678'}
				]
			}
		},
		methods: {
			editField(field) {
				uni.navigateTo({
					url: `/pages/user/set/set?field=${field}`
				})
			},
			goToBankCards() {
				uni.navigateTo({
					url: '/pages/bank/list'
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding: 30rpx;
}

.section {
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	padding: 0 30rpx;
	
	.section-title {
		display: block;
		font-size: 28rpx;
		color: #999;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.item-value {
			display: flex;
			align-items: center;
			
			text {
				color: #666;
				margin-right: 20rpx;
			}
		}
	}
}
</style>
